reactjs - How to create popup with YouTube video that not affect main page? -
i'm trying have popup window youtube video not affect main page.
i can still interact main page, similar on this web site when click track have small popup video on right bottom corner.
i have app.js
youtube api
{ getyoutubeapi = (searchterms1, searchterms2) => { fetch(`https://www.googleapis.com/youtube/v3/search?part=snippet&maxresults=10&q=${searchterms1} ${searchterms2}&type=video&key=your_key`) .then(res=>res.json()) .then(data=>{ this.setstate({videoid: data.items[0].id.videoid}) }) .catch(error=>console.log(error)) } render(){ return (<youtube opts={opts} videoid={this.state.videoid} />) } }
getyoutubeapi
function call on click on track bring top of page youtube video loads.
here school project.
since describes dom behavior more business logic, put in whatever want in specific component behaves modal (whether swapping out css classes or setting inline styles based on conditions).
to make modal reusable, i'll suggest make higher order component wrap around <youtube />
component or other component want display modals.
for example, have
const modal = (componenttodisplayasmodal, props) => ( <div class="modal"> <componenttodisplayasmodal {...props} /> </div> )
you style modal
class behave modal.
on view wish show modal, render
modal(youtube, props)
Comments
Post a Comment