Video Embed Size Depending on Device

[D347HxD]

 

Hey this is probably a very dumb question, but I am trying to embed a video into the html of my theme so it shows right above the forums and below the menu.

Currently, if I change the embed size I can only make it look good for either mobile or desktop. How would I change this script to change the embed size depending on device? My current html is:

<div style="text-align:center">

<iframe width="350" height="385" src="src="videolinkhere" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

</div>

 

 

[titcrunch]

try this for your iframe

<iframe width="100%" height="385" src="src="videolinkhere" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

100 % width and put in height the size you would

[titcrunch]

width="100%" => show the embed all time in full width for all device => is the easy way

for a iframe full responsive you need a css change on your div for add a position relative on her and a css change on iframe and remove size in iframe

<div class="conteneur">

<iframe src="src="videolinkhere" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

</div>

.conteneur
{
position: relative;
text-align: center;
}

.conteneur iframe
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

 

Edited February 10, 2018 by titcrunch

[D347HxD]

53 minutes ago, titcrunch said:

width="100%" => show the embed all time in full width for all device => is the easy way

for a iframe full responsive you need a css change on your div for add a position relative on her and a css change on iframe and remove size in iframe

<div class="conteneur">

<iframe src="src="videolinkhere" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

</div>

.conteneur
{
position: relative;
text-align: center;
}

.conteneur iframe
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

 

The css script should be dumped into core.css right?

[titcrunch]

no in custom css

[D347HxD]

6 hours ago, titcrunch said:

no in custom css

Okay, I have this in my globalTemplate somewhere between my <main> </main> area, which is where I put old code I provided before. (yes, I changed videourlhere to my actual link before testing)

(There was a small syntax error after the first iFrame in the script you provided, you added src twice which was bugging it out)

 

Then I put this at the bottom of my custom.css file

 

Though the video does not show on the page, it doesn't even make a blank spot where it should go. Acts as if nothing has changed.

 

By the way, when I enter the video url I am using the EMBED video link you get from YT's embed script.

Edited February 11, 2018 by D347HxD

[titcrunch]

send a link of your page plz we look the code

[D347HxD]

 

Like I said, nothing happens. The video does not show on the page, it doesn't even make a blank spot where it should go. Acts as if nothing has changed.

Where I am putting the code should put it right between the Home and Forums section.

If I add a <div>test</div> right where I enter the code it shows: 

[D347HxD]

16 minutes ago, titcrunch said:

try this for your iframe

<iframe width="100%" height="385" src="src="videolinkhere" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

100 % width and put in height the size you would

This worked, removed the css script and the div for it, then removed the extra src= in this, and it worked perfectly. Thanks.

[titcrunch]

your welcome

[Cookie Monster]

The question(s) in this support topic have been answered and the topic author has resolved their issue. This topic is now closed. If you have other questions, please open a new topic.